<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>案例详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <!--<link rel="stylesheet" href="../css/mui.min.css">-->
    <link rel="stylesheet" href="/static/mui/css/mui.css">
    <link href="/static/css/css.css" rel="stylesheet" type="text/css"/>
    <!--App自定义的css-->
    <!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
    <style>

        .mui-fullscreen {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .mui-fullscreen .mui-slider-group {
            height: 100%;
        }
        .mui-fullscreen .mui-slider-item {
            top: 50%;
            transform: translateY(-50%);
        }
    </style>

</head>


<body>

<header class="head headTitle">
    <a class="back" href="{:url('/home/Shouye/cases')}" style="left: 1.8667rem;top: 1.11rem;width: 0.515rem;">
        <img src="/static/images/back_gray.png" alt="返回">
    </a>
    <h1 class="title" style="margin-top: 3.5%;font-size: 18px;">热门案例</h1>
</header>
<div id="cont" class="mui-content">

    <div id="slider" class="mui-slider mui-fullscreen" style="background-color: black;">
        <div class="mui-slider-group mui-slider-loop">
            <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
            <div class="mui-slider-item mui-slider-item-duplicate" >
                <a href="#">
                    <img  src="{$pic_end.cases_img}">
                    <div class="mui-slider-title" style="bottom: 0px;color: white;">
                        <!--<span style="font-size: 18px;">川汇区</span>-->
                        <span style="font-size: 18px;">{$pic_end.house_type}</span>
                        <span style="font-size: 18px;">{$pic_end.area}m²</span>
                        <p style="color: white;">
                            {$pic_end.cases_detail}
                        </p>
                    </div>

                </a>



            </div>
            {foreach $data as $v}
            <div class="mui-slider-item">
                <a href="#">
                    <img style="object-fit: cover" src="{$v.cases_img}">
                    <div class="mui-slider-title" style="bottom: 0px;color: white;">
                        <!--<div>-->
                           <!---->
                        <!--</div>-->
                        <!--<span style="font-size: 18px;">河南省周口市川汇区</span>-->
                        <span style="font-size: 18px;">{$v.house_type}</span>
                        <span style="font-size: 18px;">{$v.area}m²</span>
                        <p style="color: white;">
                            {$v.cases_detail}
                        </p>

                    </div>
                </a>



            </div>
            {/foreach}
            <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
            <div class="mui-slider-item mui-slider-item-duplicate">
                <a href="#">
                    <img  src="{$pic_start.cases_img}">
                    <div class="mui-slider-title" style="bottom: 0px;color: white;">
                        <!--<span style="font-size: 18px;">河南省周口市川汇区</span>-->
                        <span style="font-size: 18px;">{$pic_start.house_type}</span>
                        <span style="font-size: 18px;">{$pic_start.area}m²</span>
                        <p style="color: white;">
                            {$pic_start.cases_detail}
                        </p>
                    </div>

                </a>


            </div>
        </div>

    </div>
</div>
</body>

<script src="/static/mui/js/mui.min.js"></script>
<script src="/static/js/jquery-1.11.3.min.js"></script>

<script>

    // mui.init({
    //     swipeBack:true //启用右滑关闭功能
    // });

    // $(function(){
    //     var hHeight = window.innerHeight;//获取屏幕高度
    //     console.log(hHeight);
    //     var headHeight = $('header').height();//获取头部的高度
    //     console.log(headHeight+'aaaa');
    //     var aHeight = $('.mui-slider-item').find('img').height();//获取图片的高度
    //     console.log(aHeight+'bbbbb');
    //     $('.mui-slider-item').find('img').css({"margin-top":(hHeight-headHeight-aHeight+90)/2+"px"});
    // });

    //轮播图
    var gallery = mui('#slider');
    gallery.slider({
        interval:0,//自动轮播周期，若为0则不自动播放，默认为0；
    });





</script>



</html>